// 1. 导入React.createElement创建挂载组件
    // - 格式： ("div",{},...Child)
// 2. 导入ReactDom.createRoot 创建根元素的组件；
import React from "react"; 
import ReactDom from "react-dom/client";


const VNode = React.createElement(
  "div", // 易错为：{type:"div",}
  {
    style:{
      fontSize:"24px",
      color: "red"
    }
  },
  "你好朋友",
  React.createElement(
    "button",
    {
      style: {
        width: "100px",
        height: "80px",
      }
    },
    "打招呼"
  )
)
const root = ReactDom.createRoot(document.querySelector("#root"));
root.render(VNode);





// import React,{ Component } from "react";
// import ReactDom from "react-dom/client";
// import Component1 from "./project-02/Component1";

// const VNode = <>
//   <div>组件</div>
//   <Component1></Component1>
// </>
// const root = ReactDom.createRoot(document.querySelector("#root"));
// root.render(VNode);




// import React, { Component } from "react"
// import ReactDom from "react-dom/client"
// import Child01 from "./project-01/Child01";
// import Child02 from "./project-01/Child02";
// import Child03 from "./project-01/Child03";
// const VNode = <>
//   <Child01/>
//   <Child02/>
//   <Child03/>
// </>
// const root = ReactDom.createRoot(document.querySelector("#root")).render(VNode);

//function React.createElement<{
//     style: {
//         fontSize: string;
//         color: "red";
//     };
// }, HTMLElement>(type: React.HTMLElementType, props?: (React.ClassAttributes<HTMLElement> & {
//     style: {
//         fontSize: string;
//         color: "red";
//     };
// }) | null | undefined, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<{
//     style: {
//         fontSize: string;
//         color: "red";
//     };
// }, HTMLElement>

















/* 
1. 模块组件基础引用；
  - 创建root的组件 import ReactDom from "react-dom/client";
  - 创建类组件 import React, {Component} from "react";

2. 组件内部的需要使用的函数；
  - ReactDom.createRoot();
  - export default class Child extends from Component{ render(){
      return ()
    }}
  - React.createElement("h1",{},"你好",ReactDom.createElement())// 这里易错，React 不是 ReactDom

3. 样式的引用；
*/

/* 
1. 模块组装：
  1. 外部：createElement，{Child01}；
  2. 外部：class .. extends .. render, <Child01>；
  3. 内部：都可以写{VNode1}；
*/

/* 
1. className;
  1. 三目运算；{}
  2. 第三方库；{className({})}；
2. 绑定数组；
  1. state放在render外；
3. 定义变量；
  1. 变量在render外为实例变量，实例存在，render内部会导致渲染时重新计算list, 导致性能问题；
*/

/* 
1. 绑定事件
  1. input 的value属性，onChange绑定事件，打印arguments和evt,this；
  2. 两种函数的定义方式；// 注意：定义在render外层；
  3. 表单值的回显；默认情况下是readOnly；
  4. this的找回获取；
2. this指向，数据修改；
*/

/* 
1. 检查未完成表单
2. 表单权限功能；
3. react继续学习；
*/
